<template>
  <div class="official-class">
      <!-- 头部图片 -->
    <div class="top">
      <img :src="cards.coverImgUrl" alt="" />
      <div class="update-time">{{cards.updateTime | dateFormat('M-D') }}更新</div>
      <div class="play"><i class="el-icon-video-play"></i></div>
    </div>
    <!-- 歌曲列表 -->
    <div class="song-list">
      <div class="item flex" v-for="(item,index) in songList" :key="item.id" v-bind:class="{first:(index==0)}">
        <div class="left">
          <span class="order">{{index+1}}</span>
          <span class="name">{{item.name}}</span>
        </div>
        <div class="user">{{item.ar[0].name}}</div>
      </div>
    </div>
    <div class="bottom">查看全部></div>
  </div>
</template>

<script>
import { getOfficialRankListDetails , getSongDetails} from "@/network/ranklist";
import { dateFormat } from "@/common/filter";
export default {
  name: "RankClass",
  data() {
    return {
      songList: []
    };
  },
  props: {
    cards: { type: Object },
  },
  created() {
    this.getOfficialListDetails(this.cards.id);
  },
  methods: {
    //获取榜单详细信息
    getOfficialListDetails(id) {
      getOfficialRankListDetails("/playlist/detail", {
        id: id,
      }).then((res) => {
        // console.log(res.privileges);
        var songData = res.privileges.splice(0,8);
        this.songList = [];
        songData.forEach((item)=>{
            this.getClassSongDetails(item.id);
        },this)
      });
    },
    getClassSongDetails(ids){
        getSongDetails('/song/detail',{ids:ids}).then(res=>{
            // console.log(res);
            this.songList.push(res.songs[0]);
        })
    }
  },
  watch:{
    
  },
  filters: {
      dateFormat
  }
};
</script>

<style scoped lang="less">
.official-class {
  width: 300px;
  height: 362px;
  border: 1px solid #ccc;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
  .top {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    img {
      position: absolute;
      top: -96px;
      left: 0;
      width: 300px;
    }
    .update-time{
        position: absolute;
        left: 20px;
        bottom: 0;
        color: #fff;
    }
    .play{
        position: absolute;
        right: 20px;
        bottom: 0;
        .el-icon-video-play{
            width: 36px;
            height: 36px;
            font-size: 36px;
            color: #fff;
            // font-weight: 100;
        }
    }
    .play:hover{
      cursor: pointer;
    }
  }
  .song-list{
      .item{
          height: 28px;
          line-height: 28px;
          .left{
              .order{
                  color: red;
                  font-weight: 600;
                //   font-size: px;
                  padding: 0 5px;
              }
              .name{
                  font-size: 13px;
              }
          }
      }
      .first{
          background-color: #e4e1e1;
      }
      .item:hover{
          background-color: #e4e1e1;
      }
  }
  .bottom{
      width: 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: #fff;
      text-align: right;
  }
}
</style>